<template>
    <span>
        <span style="font-size:30px;color: rgb(102,102,102);margin-bottom: 5px;">新闻资讯</span>
    </span>
    <el-carousel height="294px" width="440px">
        <el-carousel-item v-for="i in news" :key="i.id">
            <span style="text-align: center;background-color: rgba(0,0,0,0.6);;font-size: larger;
             position: absolute;z-index: 1;right: 0;bottom: 0px;left: 0;color: white;">{{ i.title }}</span>
            <el-image :src="i.face" :fit="fit" style="width: 100%;height: 100%;">
                <template #placeholder>
                    <el-image src="https://www.sucaijishi.com/uploadfile/2018/0919/20180919030733948.gif" :fit="fit"
                        style="width: 100%;height: 100%;" />
                </template>
            </el-image>
        </el-carousel-item>
    </el-carousel>
</template>

<script>
import { ref } from 'vue';
import $ from 'jquery';
export default {
    name: "carouselComponents",
    setup() {
        let news = ref([]);
        let getInfo = () => {
            $.ajax({
                type: "post",
                url: "http://127.0.0.1:3001/homeArticle/getShowHomeByTag/",
                data: {
                    tag: "新闻资讯",
                },
                success(resp) {
                    news.value = resp.article;
                }
            })
        }
        getInfo();
        return {
            getInfo,
            news,
        }
    }
}

</script>

<style scoped></style>